<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto list">
			<view class="flex-col list-item space-y-23" :key="index" v-for="(item, index) in content.list">
				<view class="flex-row justify-between">
					<view class="flex-row items-center">
						<image class="image_6" :src="item.avatar" />
						<view class="flex-col group space-y-15">
							<text class="font_2">{{item.nickname}}</text>
							<view class="flex-row space-x-8">
								<image class="image_7" src="/static/level1.png" mode=""
									v-for="(item1,index1) in Number(item.score)" :key="index1" />
								<image class="image_7" src="/static/level2.png" mode=""
									v-for="(item1,index1) in 5-Number(item.score)" :key="index1" />
							</view>
						</view>
					</view>
					<text class="self-start font_3 text_4">{{item.create_time}}</text>
				</view>
				<view class="flex-col">
					<view>
						<text class="font_4">{{item.content}}</text>
					</view>
					<view class="flex-row items-center" style="flex-wrap: wrap;"> 
						<image class=" image_10" v-for="(item1,index1) in item.pictures" :key="index1" :src="item1.abs_url" />
					</view>
					<view class="flex-row justify-between items-center section3 font_5" v-if="item.reply!=''">
						{{item.reply}}
					</view>
					<!-- <view class="flex-row justify-between items-center section_3" v-else>
						<input class="font_5" type="text" placeholder="我的回复..." style="width: 80%;" v-model="item.reply1">
						<view class="flex-col justify-start items-center button" @click="toReply(index,item)"><text class="font_6">回复</text></view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let token = ref('')
	let p = ref(1)
	let content = ref({
		wallet: {},
		list: [{
			level:'3'
		}],
		reply:'',
		show: false
	})
	onShow(() => {
		content.value.list.length = 0
		p.value = 1
		getlist()
	})
	onReachBottom(() => {
		p.value++
		getlist()
	})
	const getlist = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.myComments, {
			p: p.value,
			shop_id: uni.getStorageSync('shop_id')
		}).then(res => {
			console.log(res);
			content.value.list = [...content.value.list, ...res.data.list]
			// console.log(content.value.list);
		})
	}
	const toList = () => {
		content.value.list.length = 0
		p.value = 1
		getlist()
	}
	
	const toReply=(index,v)=>{
		proxy.$req.requestPOST(proxy.$api.WorkerCenterInfo.commentReply, {
			comm_id: v.comm_id,
			reply:v.reply1
		}).then(res => {
			console.log(res);
			if(res.flag="success"){
				content.value.list[index].reply=v.reply1
			}
		})
	}
	const toChange = () => {
		proxy.$req.requestPOST(proxy.$api.WorkerCenterInfo.doExchange).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		})
	}
	const toReflect = () => {
		uni.navigateTo({
			url: '/pages/Withdrawal/Withdrawal'
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.list {
			padding-bottom: 185rpx;
			overflow-y: auto;

			.list-item {
				padding: 32rpx 24rpx 32rpx 28rpx;
				background-color: #ffffff;

				.image_6 {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.group {
					margin-left: 17rpx;
					margin-bottom: 4rpx;

					.font_2 {
						font-size: 30rpx;
						font-family: PingFang SC;
						line-height: 29rpx;
						font-weight: 500;
						color: #333333;
					}

					.space-x-8 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 8rpx;
						}

						.image_8 {
							width: 22rpx;
							height: 22rpx;
						}
					}
				}

				.space-y-15 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 15rpx;
					}
				}

				.image_7 {
					width: 22rpx;
					height: 22rpx;
				}

				.image_9 {
					margin-bottom: 4rpx;
				}

				.font_3 {
					font-size: 22rpx;
					font-family: PingFang SC;
					line-height: 17rpx;
					color: #999999;
				}

				.text_4 {
					margin-top: 16rpx;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 40rpx;
					color: #333333;
				}

				.image_10 {
					margin-top: 22rpx;
					margin-left: 15rpx;
					border-radius: 20rpx;
					width: 165rpx;
					height: 166rpx;
				}
				.section3{
					margin-right: 5rpx;
					padding: 10rpx 20rpx;
					background-color: #fafafa;
					border-radius: 20rpx;
					margin: 20rpx 0;
				}
				.section_3 {
					margin-right: 5rpx;
					padding: 14rpx 24rpx 14rpx 31rpx;
					background-color: #fafafa;
					border-radius: 20rpx;

					.font_5 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
						color: #333;
					}

					.button {
						padding: 18rpx 0;
						background-color: #74b72e;
						background-image: linear-gradient(0deg, #1ebdff 0%, #6ed5ff 100%);
						border-radius: 20rpx;
						width: 108rpx;
						height: 60rpx;

						.font_6 {
							font-size: 24rpx;
							font-family: PingFang SC;
							line-height: 23rpx;
							font-weight: 500;
							color: #ffffff;
						}
					}
				}
			}

			.space-y-23 {
				
				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 23rpx;
				}
			}
		}
	}
</style>